<template>
<div class="gantt-box">
  <ArrangeCard/>
  <ArrangementTable @statusUpdate="statusUpdate"/>
  <div class="gantt-box-flex"  :key="'gantt-1'">
    <div class="gantt-header">
      <div class="gantt-title">
        <span>船舶排布</span>
      </div>
    </div>
    <HightChartsShip  ref="gantt"
                      :ganttConfig="shipGanttConfig"
                      :isRedraw="isRedraw"
                      :allExport="allExport"
                      @exportImg="exportImg"
                      :planId="planId"
                      :schemeId="schemeId"
    />
  </div>
  <div class="gantt-box-flex"  :key="'gantt-2'">
    <div class="gantt-header">
      <div class="gantt-title">
        <span>货源排布</span>
      </div>
    </div>
    <HightChartsGoods
        :ganttConfig="goodsGanttConfig"
        :isRedraw="isRedraw"
        :allExport="allExport"
        @exportImg="exportImg"
    />
  </div>
  <div class="gantt-box-flex"  :key="'gantt-3'">
    <div class="gantt-header">
      <div class="gantt-title">
        <span>资源方排布</span>
      </div>
    </div>
    <HightChartsResource
        :ganttConfig="sellerGanttConfig"
        :isRedraw="isRedraw"
        :allExport="allExport"
        @exportImg="exportImg"
    />
  </div>
</div>
</template>
<script setup>
import {ref, defineProps, getCurrentInstance, onMounted, watch} from "vue";
import ArrangeCard from "@/pages/LngArrangement/components/ArrangementCard/ArrangeCard.vue";
import ArrangementTable from "@/pages/LngArrangement/components/ArrangementTable/ArrangementTable.vue";
import HightChartsGoods from './components/ArrangementGantt/HightChartsGoods.vue'
import HightChartsResource from './components/ArrangementGantt/HightChartsResource.vue'
import HightChartsShip from './components/ArrangementGantt/HightChartsShip.vue'
const { proxy  } = getCurrentInstance()
const emit = defineEmits(['updatePlanId', 'getImgData', 'exportTable'])
import dayjs from 'dayjs'
const props = defineProps({
  activeKey: {
    type: String,
    default: ''
  },
  ganttData: {
    type: Object,
    default: () => {}
  },
  allExport: {
    type: Boolean,
    default: false
  },
  resSide: {
    type: String,
    default: ''
  },
  stateObj: {
    type: Object,
    default: () => {}
  }
})
const allExport = ref(props.allExport)
const gantt = ref(null)
// 贸易类型
const areas = ref([
  {
    label: '长协',
    value: 1
  },
  {
    label: '中期',
    value: 2
  },
  {
    label: '现货',
    value: 3
  }
])
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
])
// 航线
const AirOptions = ref([
  {
    label: '巴拿马运河',
    value:1
  },
  {
    label: '好望角海峡',
    value:2
  },
  {
    label: '苏伊士运河',
    value:3
  }
])
const isRedraw = ref(0)
const shipGanttConfig = ref({
  // 数据源
  data: [],
  // 左侧表格列配置
  tableConfig: [],
})
const sellerGanttConfig = ref({
  data: [],
  tableConfig: []
})
const goodsGanttConfig = ref({
  data: [],
  tableConfig: []
})
watch(() => props.allExport, (newVal) => {
  allExport.value = newVal
})
watch(() => isRedraw.value, (newVal) => {
  isRedraw.value = newVal
}, {
  deep: true
})
const planId = ref('')
watch(() => planId.value, (newVal) => {
  planId.value = newVal
})
const schemeId = ref('')
const getLastData = (val) => {
  shipGanttConfig.value.tableConfig = []
  sellerGanttConfig.value.tableConfig = []
  goodsGanttConfig.value.tableConfig = []
  sellerGanttConfig.value.data = []
  shipGanttConfig.value.data = []
  goodsGanttConfig.value.data = []
  if(val.schemeInfo) {
    planId.value = val.schemeInfo.planId? val.schemeInfo.planId.toString() : ''
    schemeId.value = val.schemeInfo.schemeId? val.schemeInfo.schemeId.toString() : ''
  } else {
    planId.value = val.planId? val.planId.toString() : ''
    schemeId.value = val.schemeId? val.schemeId.toString() : ''
  }
  let shipData = val.shipNames
  let goodsData = val.goodsNames
  let sellerData = val.sellerNames
  console.log('shipData',shipData)
  shipData.map((item, index) => {
    shipGanttConfig.value.tableConfig.push(item.shipName)
    if (item.details.length > 0 && item.details) {
      item.details.map(child => {
        shipGanttConfig.value.data.push(Object.assign({}, child, {
          createBy: localStorage.getItem('userName'),
          id: child.id.toString(),
          shipContractId: child.shipContractId? child.shipContractId.toString() : null,
          y: index,
          color: colorFn(Number(child.executeStatus)),
          tradeTypeLabel: tradeTypeFn(child.tradeType),
          tradeBodyLabel: tradeBodyFn(child.tradeBody),
          shipTradeBodyLabel: tradeBodyFn(child.shipTradeBody),
          sellerTradeBodyLabel: tradeBodyFn(child.sellerTradeBody),
          shipRouteLabel: shipRouteFn(child.shipRoute),
          schemeId: child.schemeId.toString(),
          resourceContract: child.resourceContract? child.resourceContract.toString() : '',
          sellerResourceContract: child.sellerResourceContract? child.sellerResourceContract.toString() : '',
          completed: child.expectedFullLoadVoyageDays / (child.expectedFullLoadVoyageDays + child.expectedEmptyLoadVoyageDays),
          draggable: true,
          start: dayjs(child.expectedLoadingDate).valueOf(),
          end: dayjs(child.expectedEmptyReturnWindow).valueOf(),
        }))
      })
    }
  })
  goodsData.map((item, index) => {
    goodsGanttConfig.value.tableConfig.push(item.goodsName)
    if (item.details.length > 0 && item.details) {
      item.details.map((child) => {
        goodsGanttConfig.value.data.push(Object.assign({}, child, {
          id: child.id.toString(),
          y: index,
          tradeTypeLabel: tradeTypeFn(child.tradeType),
          tradeBodyLabel: tradeBodyFn(child.tradeBody),
          shipRouteLabel: shipRouteFn(child.shipRoute),
          sellerTradeBodyLabel: tradeBodyFn(child.sellerTradeBody),
          shipTradeBodyLabel: tradeBodyFn(child.shipTradeBody),
          color: colorFn(Number(child.executeStatus)),
          schemeId: child.schemeId.toString(),
          resourceContract: child.resourceContract? child.resourceContract.toString() : '',
          sellerResourceContract: child.sellerResourceContract? child.sellerResourceContract.toString() : '',
          completed: child.expectedFullLoadVoyageDays / (child.expectedFullLoadVoyageDays + child.expectedEmptyLoadVoyageDays),
          draggable: true,
          start: dayjs(child.expectedLoadingDate).valueOf(),
          end: dayjs(child.expectedEmptyReturnWindow).valueOf(),
        }))
      })
    }
  })
  sellerData.map((item, index) => {
    sellerGanttConfig.value.tableConfig.push(item.sellerName)
    if (item.details.length > 0 && item.details) {
      item.details.map(child => {
        sellerGanttConfig.value.data.push(Object.assign({}, child, {
          id: child.id.toString(),
          y: index,
          tradeTypeLabel: tradeTypeFn(child.tradeType),
          tradeBodyLabel: tradeBodyFn(child.tradeBody),
          shipRouteLabel: shipRouteFn(child.shipRoute),
          sellerTradeBodyLabel: tradeBodyFn(child.sellerTradeBody),
          shipTradeBodyLabel: tradeBodyFn(child.shipTradeBody),
          color: colorFn(Number(child.executeStatus)),
          schemeId: child.schemeId.toString(),
          resourceContract: child.resourceContract? child.resourceContract.toString() : '',
          sellerResourceContract: child.sellerResourceContract? child.sellerResourceContract.toString() : '',
          completed: child.expectedFullLoadVoyageDays / (child.expectedFullLoadVoyageDays + child.expectedEmptyLoadVoyageDays),
          draggable: true,
          start: dayjs(child.expectedLoadingDate).valueOf(),
          end: dayjs(child.expectedEmptyReturnWindow).valueOf(),
        }))
      })
    }
  })
  console.log('甘特图', shipGanttConfig.value)
  isRedraw.value++
}
/**
 * 颜色切换
 * */
const colorFn = (i) => {
  // 未下发 #165DFF  已下发(船货排布) 38E9FDA3  执行中（已排布）#FF7D00 已完成 #00B42A 已终止 #9EA0A8A3
  const colors = ['rgba(149,26,230,0.64)',  'rgba(56,233,253,0.64)', 'rgba(0,40,243,0.64)', 'rgba(233,0,26,0.64)', 'rgba(158,160,168,0.64)']
  return colors[i]
}
/**
 * 贸易主体赋值
 * */
const tradeBodyFn = (val) => {
  let lastVal = ''
  tradeareas.value.map(item => {
    if (item.value === val) {
      lastVal = item.label
    }
  })
  return lastVal
}
/**
 * 贸易类型赋值
 * */
const tradeTypeFn = (val) => {
  let lastVal = ''
  areas.value.map(item => {
    if (item.value === val) {
      lastVal = item.label
    }
  })
  return lastVal
}
/**
 * 航线赋值
 * */
const shipRouteFn = (val) => {
  let lastVal = []
  console.log('航线的值', val)
  if (val) {
    if (Array.isArray(val)) {
      return  val.join(',')
    } else {
      let newVal = val.split(',')
      if (newVal.length > 0 && Array.isArray(newVal)) {
        newVal.map(item => {
          AirOptions.value.map(rVal => {
            if (Number(item) === rVal.value) {
              lastVal.push(rVal.label)
            }
          })
        })
      }
      return lastVal.join(',')
    }
  }  else {
    return  lastVal
  }
}
const getChartData = () => {
  proxy.$api.getShipArrangeChart({planId: '', schemeId: ''}).then(res => {
    console.log('船货排布甘特图信息', res.resultObject)
    let data = res.resultObject
    if (data) {
      getLastData(res.resultObject)
      emit('updatePlanId', planId.value)
    }
  })
}
/**
 * 导出图片
 * */
const exportImg = (val) =>{
  emit('getImgData', val)
}
const statusUpdate = () => {
  getChartData()
}
onMounted(() => {
  getChartData()
})
</script>

<style lang="scss" scoped>
.gantt-box-flex {
  background: #ffffff;
  margin-top: 10px;
}
.gantt-header {
 display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #F7F8FA;
  .gantt-title {
    font-weight: bold;
    font-size: 24px;
    //position: relative;
    //left: 1%;
    line-height: 70px;
    margin: 0 16px;
    text-align: left;
    span {
      padding-left: 16px;
    }
  }
  .moth-flex {
    display: flex;
    //position: relative;
    //left: 40%;
    padding: 20px;
    .month-item-btn {
      width: 80px;
      height: 30px;
      border: 1px solid #dcdee0;
      border-radius: 0px 3px 3px 0px;
      line-height: 30px;
      &:active {
        background: rgba(245,0,29,0.05);
        border: 1px solid #f5001d;
        color: #f5001d;
      }
      &:last-child{
        margin-left: 75px;
      }
    }
  }
}

</style>
